import Head from 'next/head'
import Layout from '../../components/layouts/default'
import utilStyles from '../../styles/utils.module.css'
import { getSortedPostsData, getAllTags } from '../../lib/paginationPosts'
import PostItem from '../../components/PostItem'
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(({ breakpoints, spacing, palette }) => ({
  list: {
    [breakpoints.down('md')]: {
      paddingTop: spacing(5)
    }
  }
}))

export default function Home({ allPostsData }) {
  const classes = useStyles()
  return (
    <Layout>
      <Head>
        <title>boboan</title>
      </Head>
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <ul className={utilStyles.list + ' ' + classes.list}>
          {allPostsData.map((post) => <PostItem {...post} />)}
        </ul>
      </section>
    </Layout>
  )
}
export async function getStaticPaths() {
  const paths = getAllTags().map(tag => ({
    params: { tag }
  }))
  return {
    paths,
    fallback: false
  }
}
export async function getStaticProps({
  params: { tag }
}) {
  const { allPostsData, total } = getSortedPostsData(1, 9999, tag)
  return {
    props: {
      allPostsData,
      total
    }
  }
}
